<template>
  <BasicModal v-bind="$attrs" @register="registerListModal" title="桌台类型" :width="600">
    <BasicTable @register="registerTable" :rowClassName="getRowClassName">
      <template #tableTitle>
        <a-button type="primary" @click="handleCreate">新增</a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </BasicModal>
  <CategoryModal @register="registerModal" @success="handleCategoryChange" />
</template>
<script lang="ts" setup>
  import { ref, computed, reactive } from "vue"
  import { BasicModal, useModalInner, useModal } from "/@/components/Modal"
  import { categoryColumns } from "./table.data"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { BasicTable, TableAction, ActionItem } from "/@/components/Table"
  import { useListPage } from "/@/hooks/system/useListPage"
  import { listTableCategory, deleteCategory } from "./table.api"
  import CategoryModal from "./CategoryModal.vue"
  // 声明Emits
  const emit = defineEmits(["success", "register"])

  const { createMessage } = useMessage()
  const [registerModal, { openModal }] = useModal()
  const compData = reactive<any>({
    tenantId: null,
  })

  const { prefixCls, tableContext } = useListPage({
    designScope: "table-category-list",
    tableProps: {
      api: listTableCategory,
      columns: categoryColumns,
      rowKey: "id",
      striped: true,
      pagination: false,
      useSearchForm: false,
      bordered: true,
      showIndexColumn: false,
      canResize: false,
      immediate: false,
      actionColumn: {
        width: 200,
        title: "操作",
        dataIndex: "action",
        slots: { customRender: "action" },
        fixed: undefined,
      },
      beforeFetch: (params) => {
        params.tenantId = compData.tenantId
      },
    },
  })
  const [registerTable, { reload }, {}] = tableContext

  //表单赋值
  const [registerListModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({
      confirmLoading: false,
      showCancelBtn: false,
      canFullscreen: false,
      showOkBtn: false,
      draggable: false,
    })
    compData.tenantId = data?.tenantId
    reload()
  })

  const handleEdit = (record) => {
    openModal(true, { record, tenantId: compData.tenantId, isUpdate: true })
  }

  const handleDelete = async (record) => {
    await deleteCategory({ id: record.id, tenantId: compData.tenantId }, () => {
      reload()
      createMessage.success("删除成功")
      emit("success")
    })
  }
  /**
   * 操作栏
   */
  const getTableAction = (record): ActionItem[] => {
    return [
      {
        label: "编辑",
        onClick: handleEdit.bind(null, record),
      },
      {
        label: "删除",
        popConfirm: {
          title: "是否确认删除",
          confirm: handleDelete.bind(null, record),
        },
      },
    ]
  }

  const getRowClassName = (record) => {
    return prefixCls
  }
  const handleCreate = () => {
    openModal(true, { tenantId: compData.tenantId, isUpdate: false })
  }
  const handleCategoryChange = () => {
    reload()
    emit("success")
  }
</script>
